<template>
  <div>
    <van-form @failed="onFailed" ref="formRef">
      <van-cell-group inset>
        <van-field
          required
          v-model="Info.mobile"
          label="手机号码"
          placeholder="请输入手机号"
          disabled
          :rules="[{ required: true, message: '请输入手机号' }]"
        />
        <!-- <van-field
          required
          name="uploader"
          label="微信收款二维码"
          :rules="[{ required: true, message: '请上传收款二维码' }]"
        >
          <template #input>
            <van-uploader v-model="Info.wx" />
          </template>
        </van-field> -->
        <div class="w-full h-15px bg-[#fbfbfb]"></div>
        <van-field
          required
          label-width="150"
          v-model="Info.alipay_code"
          name="uploader"
          label="支付宝收款二维码"
          :rules="[{ required: true, message: '请上传收款二维码' }]"
        >
          <template #input>
            <van-uploader
              name="支付宝"
              v-model="fileList"
              :after-read="afterRead"
              reupload
              max-count="1"
            /> </template
        ></van-field>
        <div class="w-full h-15px bg-[#fbfbfb]"></div>
        <van-field
          v-model="Info.network_link"
          label="交易网络链"
          placeholder="例如TRC链"
        />
        <van-field
          label-width="120"
          v-model="Info.usdt_url"
          label="USDT钱包地址"
          placeholder="例如TRC链"
        />
        <van-field name="uploader" label="钱包二维码">
          <template #input>
            <van-uploader
              name="钱包"
              :after-read="afterRead"
              v-model="fileWallList"
              max-count="1"
            /> </template
        ></van-field>
        <div class="w-full h-15px bg-[#fbfbfb]"></div>
        <van-field
          required
          v-model="Info.bank_name"
          label="银行名称"
          placeholder="请输入银行名称"
          :rules="[{ required: true, message: '请输入银行名称' }]"
        />
        <van-field
          required
          v-model="Info.bank_address"
          label="开户行名称"
          placeholder="请输入银行开户行名称"
          :rules="[{ required: true, message: '请输入开户行名称' }]"
        />
        <van-field
          required
          v-model="Info.bank_no"
          label="银行卡号"
          placeholder="请输入银行卡号"
          :rules="[{ required: true, message: '请输入银行卡号' }]"
        />
        <div class="w-full h-15px bg-[#fbfbfb]"></div>
        <van-field
          required
          v-model="Info.name"
          label="收款人姓名"
          placeholder="请输入收款人姓名"
          :rules="[{ required: true, message: '请输入收款人姓名' }]"
        />
        <div class="w-full h-15px bg-[#fbfbfb]"></div>
        <div class="text-14px text-center mt-15px flex justify-center">
          <div class="border-b w-[80%] pb-15px">
            验证码将发送至：{{ Info.mobile }}
          </div>
        </div>

        <van-field
          required
          v-model="Info.code"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <template #button>
            <van-button
              size="small"
              round
              type="primary"
              @click="handleCode"
              :disabled="disabled"
              >{{ codeText }}</van-button
            >
          </template></van-field
        >
      </van-cell-group>
    </van-form>
    <div class="p-20px">
      <div
        @click="submit"
        class="mt-20px w-full flex justify-center items-center text-white bg-[#2E95FF] rounded-5px h-49px"
      >
        确认修改
      </div>
    </div>
  </div>
</template>
<script setup>
import OSS from "ali-oss";
import { showToast } from "vant";
import { inject } from "vue";
import { useRouter } from "vue-router";
import { getMobileCode, editInfo, userInfo } from "@/util/api";
const Info = reactive({
  mobile: "",
  wechat_code: "",
  alipay_code: "",
  network_link: "", //交易链
  usdt_url: "", //usdt地址
  wallet_code: "", //钱包二维码
  bank_name: "", //银行名称
  bank_address: "", //开户行名称
  bank_no: "", //银行卡号
  name: "", //收款人姓名
  code: "", //验证码
});
const router = useRouter();
const fileList = ref([]);
const fileWallList = ref([]);
const disabled = ref(false);
const codeText = ref("发送验证码");
const time = ref(60);
const formRef = ref(null);
const global = inject("global");

const getData = async () => {
  const res = await userInfo();
  for (let i in Info) {
    Info[i] = res.msg[i];
  }

  // fileList.value.push({ url: Info.alipay_code });
  // fileWallList.value.push({ url: Info.wallet_code });
  // console.log(Info);
};
getData();
const onFailed = (v) => {
  //  console.log(v);
};
const submit = async () => {
  formRef.value
    .validate()
    .then(async () => {
      const res = await editInfo(Info);
      showToast(res.msg);
      res.code == 1 ? router.go(-1) : "";
    })
    .catch((err) => {
      console.log(err);
    });

  // let su = formRef.value.submit();
  // console.log(su);
  // if (su) {
  //   console.log(222222);
  // }
};
const handleCode = async () => {
  const regMobile =
    /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
  if (!Info.mobile) {
    showToast("请输入手机号");
    return;
  }
  if (!regMobile.test(Info.mobile)) {
    showToast("请输入正确的手机号");

    return;
  }

  const res = await getMobileCode({ mobile: Info.mobile, type: 3 });
  showToast(res.msg);
  disabled.value = true;
  let timer = setInterval(() => {
    time.value--;
    if (time.value) {
      codeText.value = time.value + "秒后重新发送";
    } else {
      timer = clearInterval(timer);
      disabled.value = false;
      time.value = 60;
      codeText.value = "获取验证码";
    }
  }, 1000);
  //   发送验证码
};
const afterRead = (v, name) => {
  let e = v.file;
  var arr = e["name"].split(".");
  var img_type = arr[1];
  let client = new OSS({
    region: global.region,
    //云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，部署在服务端使用RAM子账号或STS，部署在客户端使用STS。
    accessKeyId: global.accessKeyId,
    accessKeySecret: global.accessKeySecret,
    bucket: global.bucket,
  });
  //获取当前时间
  var date = new Date();
  var file_name =
    date.getFullYear() +
    "/" +
    (date.getMonth() + 1) +
    "/" +
    date.getDate() +
    "/" +
    date.getHours() +
    "_" +
    date.getMinutes() +
    "_" +
    date.getSeconds() +
    "_" +
    date.getMilliseconds();
  let filename = file_name + "." + img_type;

  let res_file = e;
  let progre = "";
  async function put() {
    try {
      //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
      let result = await client
        .multipartUpload(filename, res_file, {
          progress: (percentage) => {
            progre = parseInt(percentage * 100);
            // console.log("上传进度：" + progre);
            //console.log(percentage); // 上传文件进度
          },
        })
        .then((res) => {
          if (name.name == "支付宝") {
            Info.alipay_code = global.oss_url + res.name;
            //fileList.value.push({ url: Info.alipay_code });
            //  console.log(fileList.value);
          } else {
            Info.wallet_code = global.oss_url + res.name;

            // fileWallList.value.push(Info.wallet_code);
          }

          // console.log();
        })
        .catch((err) => {
          return console.log(err);
        });
    } catch (err) {
      return console.log(err);
    }
  }
  progre = 0;
  put();
};
</script>
